<template>
  <div class="topmian">
    <div class="denglu row">
      <div class="login ">
          <h4>用户登录</h4>
          <div class="login-main">
              <img src="/static/logo.png" alt="">
              <form action="">
                  <input v-model="username" type="text" name="username" placeholder="账号">
                  <br>
                  <input v-model="password" type="password" name="password" placeholder="密码">
                  <a href="#/zhuce">没账号-去注册</a>
                  <button @click="denglu" type="submit">登录</button>
                  <p>点击登录按钮，同意<i style="color: #12a7b4;cursor: pointer;">《用户协议》</i></p>
              </form>
              <!-- <div class="login-footer">
                <p>-----------------------社交账号登录--------------------</p>
              </div> -->
          </div>
      </div>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    denglu: function(ev) {
      ev.preventDefault();
      this.$axios
        .post("/top/denglu", {
          username: this.username,
          password: this.password
        })
        .then(function(data) {
          console.log(data.data);
          if(data.data.error == 0){
            alert('登录成功')
            location.href = '#/'
          }else{
            alert(data.data.message)
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-footer {
  width: 40%;
  margin: 0 auto;
  border: solid 1px black;
}
.login-main form p {
  margin-top: 15px;
}
.login-main form button {
  width: 100%;
  height: 40px;
  font-size: 18px;
  background: #12a7b4;
  border: none;
  border-radius: 5px;
  margin-top: 55px;
}
.login-main form a {
  display: block;
}
.login-main form input {
  border: none;
  border-bottom: solid 1px black;
  width: 100%;
  padding: 5px;
  margin-bottom: 20px;
}
.login-main form {
  width: 70%;
  margin-left: 15%;
  margin-top: 10%;
}
.login-main img {
  background: #12a7b4;
  width: 30%;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.login-main {
  width: 100%;
  margin: 10% auto;
  /* border: solid 1px black; */
  box-shadow: -1px -1px 5px #aaa;
}
.login h4 {
  border-bottom: solid 1px #ccc;
  padding-bottom: 15px;
}
.login {
  width: 100%;
  margin-top: 20px;
  box-shadow: -1px -1px 5px #aaa;
  padding: 20px;
  background: white;
}
.denglu {
  width: 100%;
  margin: 62px auto;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
</style>